<template>
	<div>
		<div class="info">
			<section>{{content}}</section>
		</div>
		<seller-tap>
			<span slot='font'>商品编辑</span>
			<a href="#/seller/goods" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>
		<main>
			<div class="head">

				<!--<img :src="'http://localhost:2200'+changeGood.avatar[0]" />-->
				<swiper :auto='true' :loop='true' :threshold='50' :aspect-ratio='.5'>
					<swiper-item v-for='(item,ins) in changeGood.avatar' :key='ins'>
						<div style="width: 100%;height:100%;background: rgba(0,0,0,.05)">
							<img style="width: 50%;margin-left: 25%;":src="'http://localhost:2200'+item" alt="" />
						</div>
						
						
					</swiper-item>
				</swiper>
				<p class="goodName">{{changeGood.name}}</p>
			</div>

			<form @submit.prev="change">

				<div><span>单价</span><input @input="input1" type="text" autocomplete="off" v-model.trim="price" @focus="focus" name="price" /><label><i v-if="fei1" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="price" @click="clear" class="fa fa-times-circle"></i></label></div>
				<div><span>描述</span><input type="text" autocomplete="off" v-model.trim="describe" @focus="focus" name="describe" /><label><i v-if="describe" @click="clear" class="fa fa-times-circle"></i></label></div>

				<div><span>库存</span><input type="text" autocomplete="off" v-model.trim="count" @focus="focus" name="count" /><label><i v-if="count" @click="clear" class="fa fa-times-circle"></i></label></div>

				<div>
					<button :class="{dis:isOk}">修改</button>
				</div>
			</form>

		</main>
	</div>
</template>

<script>
	import $ from 'jquery';
	import { mapState, mapGetters } from 'vuex'
	import axios from 'axios'
	import SellerTap from '../components/SellerTap'
	import { Swiper,SwiperItem} from 'vux'
	export default {
		data: function() {
			return {
				changeGood: {},
				price: '',
				describe: '',
				count: '',
				fei1: true,
				isOk: true,
				content: ''

			}
		},
		methods: {
			change(ev) {
				ev.preventDefault();

				var data = {
					price: this.price,
					describe: this.describe,
					count: this.count,
					good_id: this.changeGood._id
				}

				axios.post('/seller/changeForm', data).then((result) => {
					console.log(result.data);
					if(result.data.msg == 'success') {
						this.content = '修改成功';

						$('.info').fadeIn();
						setTimeout(function() {
							$('.info').fadeOut();
						}, 1200)
						setTimeout(function() {
							location.href = '#/seller/goods'
						})

					}

				}).catch((err) => {
					console.log(err);
				})

			},
			clear: function(ev) {
				var name = $(ev.target).parent().siblings('input').attr('name');
				this[name] = '';
				$('form button').attr('type', 'button')
				this.isOk = true;
			},
			focus: function(ev) {

				$(ev.currentTarget).siblings('label').children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				$(ev.currentTarget).parent().siblings().find('label i').each(function() {
					$(this).css('display', 'none')
				})
			},
			pattern(val, patts, theData, ins) {
				$('label').eq(ins).children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				if(!patts.test(val) || val == '') {
					this[theData] = true;
				} else {
					this[theData] = false;
				}

				if(this.fei1) {
					$('form button').attr('type', 'button')
					this.isOk = true;
				} else {
					this.isOk = false;
					$('form button').attr('type', 'submit')
				}

			},
			input1() {
				var pat = /^\S{1,}$/;
				this.pattern(this.price, pat, 'fei1', 0);
			},

		},
		components: {
			SellerTap,
			Swiper,
			SwiperItem
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'changeGood'
			]),
		},
		mounted() {
			axios.get('/seller/checkNewGood').then((result) => {
				//				console.log(result.data);
				this.changeGood = result.data.data;
			}).catch(function(err) {
				console.log(err);
			})
		}
	}
</script>

<style scoped>
	main {
		padding: 10px 0;
		padding-top: 50px;
	}
	
	main .head img {
		display: block;
		width: 80px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	
	main form div {
		border-bottom: solid 1px #ddd;
		padding: 7px 0;
		line-height: 30px;
		padding: 10px 10px;
	}
	
	main form div span {
		margin-right: 10%;
	}
	
	main form div input {
		width: 55%;
		line-height: 30px;
		border: none;
		margin-right: 10px;
		background: none;
	}
	
	main div:last-child {
		border: none;
	}
	
	main button {
		border: none;
		background: red;
		color: white;
		margin-top: 40px;
		line-height: 40px;
		width: 100%;
		font-size: 17px;
		cursor: pointer;
	}
	
	.head p {
		text-align: center;
		color: orangered
	}
	
	.fa-times-circle {
		color: #aaa;
	}
	
	.fa-eye-slash {
		color: #ccc;
	}
	
	form>div>label>i:first-child {
		display: none;
	}
	
	form>div>label>i {
		margin-right: 7px;
		font-size: 17px;
	}
	
	.foot {
		padding: 13px 0px;
		text-align: center;
		margin-top: 0px;
		font-size: 13px;
	}
	
	.foot>div {
		border-bottom: none;
	}
	
	.dis {
		color: darkgray;
		background: #ddd;
	}
	
	select {
		text-align: center;
		width: 64%;
		height: 50px;
		border: none;
		overflow-y: scroll;
		line-height: 25px;
		color: chocolate, ;
		background: bisque;
	}
	
	.foot span {
		display: inline-block;
		width: 50px;
		padding-top: 10px;
		margin-left: 22px;
		cursor: pointer;
	}
	
	.foot span i {
		position: relative;
		top: -21px;
		color: red;
		line-height: 100px;
		font-size: 30px;
	}
	
	.color>span:last-child i,
	.model>span:last-child i {
		color: red;
		margin-left: 10px;
		cursor: pointer;
	}
	
	.foot u>div {
		border: none;
		margin: 5px;
	}
	
	.foot u,
	.color u,
	.model u {
		display: inline-block;
		position: relative;
	}
	
	.color input,
	.model input {
		text-align: center;
		width: 60px;
		border: solid 1px #eee;
		padding: 0 5px;
	}
	
	.foot u>i,
	.color u i,
	.model u i {
		position: absolute;
		top: 0;
		z-index: 8;
		font-size: 15px;
		cursor: pointer;
		animation: dong .5s linear infinite;
		color: orangered;
		transform: rotate(10deg);
	}
	
	.info {
		position: fixed;
		z-index: 20;
		width: 100%;
		display: none;
		height: 100%;
		background: rgba(0, 0, 0, .4);
	}
	
	.info section {
		width: 120px;
		line-height: 120px;
		text-align: center;
		position: absolute;
		top: 200px;
		left: 33%;
		z-index: 50;
		border-radius: 20%;
		background: rgba(0, 0, 0, .8);
		color: white;
	}
	.goodName{
		font-size: 20px;
		font-weight: 600;
		margin-top: 10px;
		width: 100%;
		padding: 0 20px;
		overflow: hidden;
		text-overflow:ellipsis ;
		white-space: nowrap;
	}
</style>